// 模拟数据
var data = [
  {
    src: "1.jpg",
    title: "第一怪 竹筒当烟袋",
  },
  {
    src: "2.jpg",
    title: "第二怪 草帽当锅盖",
  },
  {
    src: "3.jpg",
    title: "第一怪 竹筒当烟袋",
  },
  {
    src: "4.jpg",
    title: "第四怪 四季服装同穿戴",
  },
  {
    src: "5.jpg",
    title: "第五怪 火车没有汽车快",
  },
  {
    src: "6.jpg",
    title: "第六怪 火车不同国内通国外",
  },
  {
    src: "7.jpg",
    title: "第七怪 老奶爬山比猴快",
  },
  {
    src: "8.jpg",
    title: "第八怪 鞋子后面多一块",
  },
  {
    src: "9.jpg",
    title: "第九怪 脚趾四季露在外",
  },
  {
    src: "10.jpg",
    title: "第十怪 鸡蛋栓着卖",
  },
  {
    src: "11.jpg",
    title: "第十一怪 粑粑叫饵块",
  },
  {
    src: "12.jpg",
    title: "第十二怪 花生蚕豆数着卖",
  },
  {
    src: "13.jpg",
    title: "第十三怪 三个蚊子一盘菜",
  },
  {
    src: "14.jpg",
    title: "第十四怪 四个竹鼠一麻袋",
  },
  {
    src: "15.jpg",
    title: "第十五怪 树上松毛扭着卖",
  },
  {
    src: "16.jpg",
    title: "第十六怪 姑娘叫老太",
  },
  {
    src: "17.jpg",
    title: "第十七怪 和尚可以谈恋爱",
  },
  {
    src: "18.jpg",
    title: "第十八怪 背着娃娃再恋爱",
  },
];

var waterfall = function(wrap, boxes) {
  // 获取屏幕可以显示的列数
  var boxWidth = boxes.eq(0).width() + 40;
  var windowWidth = $(window).width();
  var colsNumber = Math.floor(windowWidth / boxWidth);

  // 设置容器的宽度
  wrap.width(boxWidth * colsNumber);

  // 定义一个数组并存储每一列的高度
  var everyHeight = new Array();
  for (var i = 0; i < boxes.length; i++) {
    if (i < colsNumber) {
      everyHeight[i] = boxes.eq(i).height() + 40;
    } else {
      // 获取最小列的高度
      var minHeight = Math.min.apply(null, everyHeight);
      // 获取最小列的索引
      var minIndex = getIndex(minHeight, everyHeight);
      // 设置盒子样式
      setStyle(boxes.eq(i), minHeight, boxes.eq(minIndex).position().left, i);
      // 更新最小列的高度
      everyHeight[minIndex] += boxes.eq(i).height() + 40;
    }
    // 鼠标经过和离开图片时，呈现半透明的交互效果(优化)
    boxes.eq(i).hover(
      function() {
        $(this)
          .stop()
          .animate(
            {
              opacity: "0.5",
            },
            500
          );
      },
      function() {
        $(this)
          .stop()
          .animate(
            {
              opacity: "1",
            },
            500
          );
      }
    );
  }
};

// 获取最小列的索引
function getIndex(minHeight, everyHeight) {
  for (var index in everyHeight) {
    if (everyHeight[index] == minHeight) {
      return index;
    }
  }
}

// 设置追加盒子的样式
var getStartNumber = 0;
var setStyle = function(box, top, left, index) {
  if (getStartNumber >= index) {
    return false;
  }
  box
    .css({
      position: "absolute",
      top: top,
      left: left,
      opacity: "0",
    })
    .stop()
    .animate(
      {
        // 出来动画效果
        opacity: "1",
      },
      1000
    );
  getStartNumber = index;
};

// 数据请求检验
var getCheck = function(wrap) {
  // 获取文档的高度
  var documentHeight = $(window).height();
  // 获取文档向上滚动的高度
  var scrollHeight = $(window).scrollTop();
  // 获取最后一个盒子所在列的总高度
  var boxes = wrap.children("div"),
    lastBoxTop = boxes.eq(boxes.length - 1).offset().top,
    lastBoxHeight = boxes.eq(boxes.length - 1).height() + 20;
  var lastColHeight = lastBoxTop + lastBoxHeight;
  return documentHeight + scrollHeight >= lastColHeight ? true : false;
};

// 追加盒子函数
var appendBox = function(wrap) {
  if (getCheck(wrap)) {
    for (var i in data) {
      var innerString =
        '<div><img src="img/' +
        data[i].src +
        '"><a href="#" target="_blank">' +
        data[i].title +
        "</a></div>";
      wrap.append(innerString);
    }
  } else {
    return false;
  }
  waterfall(wrap, wrap.children("div"));
};

$(document).ready(function() {
  // 获取容器和盒子
  var wrap = $("#wrap");
  var boxes = $("#wrap").children("div");
  // 加载盒子
  waterfall(wrap, boxes);
  // 滚动事件
  $(this).scroll(function() {
    appendBox(wrap, boxes);
  });
});
